'use strict';

// let javas=$('li.js').text();
// console.log(javas);
// let jfa=$('[name=book]').html();
// console.log(jfa);
// let javass=$('#test-ul li.js');
// javass.html('<span style="color:red">JavaScript</span>');
// // $('#test-ul li.js').css('backgroud-color','green');

// let p1=$('[class^=p]');                                        

// setTimeout(() => {
//     // p1.html('<a href="http://baidu.com">天天向上</a>')
//     p1.css('color','green').css('backgroundColor','black');
// }, 1500);


// var div = $('#test-highlight-css ul li.js');
// TODO:
// let li = $('ul li.js');
// li.css('color', 'red');
// setTimeout(() => {
//     li.css('color', '')
// }, 1500);
// div.addClass('highlight');
// Python
// JavaScript
// Swift
// Haskell

// let ul=$('#app .p3');
// setTimeout(() => {
//   ul.remove();
// //   ul.after('<p class="p4">Lua</p>');

// }, 1500);

// 请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：

// let ul = $('#test-div>ul');
// ul.append('<li><span>Pascal</span></li>');
// ul.append('<li><span>Lua</span></li>');
// ul.append('<li><span>Ruby</span></li>');

// let lang = document.getElementById('lang')
// //第一步：把lang中li标签中的语言全部拿出来
// let arr = [];
// for (let i = 0; i < lang.children.length; i++) {
//     let temlang = lang.children[i].textContent;
//     console.log(temlang);
// }
// console.log(arr);
// //第二部：排序
// arr.sort();

// //第三部：清除lang中的所有元素
// lang.innerHtml = '';
// //第四部:把排序好的的元素，一个个插入会lang中
// arr.forEach(item => {
//     let node=document.createElement('li');
//     node.textContent=item;
//     node.classList='lang uu';
//     lang.appendChild(node);
// });

// $('#test-div ul').find('li').remove();
// let x=['JavaScript','Python','Swift','Pascal','Lua','Ruby'].sort();
// x.forEach(item=>{
//     $('#test-div ul').append('<li><span>${item}</span></li>');
// })

// let a=$('#test-a');
// a.mouseleave(function(){
//     setTimeout(() => {
//         a.css('color','green');
//     }, 500);
// })


// let txt=$('#txt');
// txt.change(function(){
//     let value=txt.val();
//     console.log('现在的值是：'+value);
// })

// let txt2=$('#txt2');
// txt2.keypress(function(){
//     let value=txt2.val();
//     console.log('现在的值是：'+value);
// })
// 绑定合适的事件处理函数，实现以下逻辑：

// 当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

// 当用户去掉“全不选”时，自动不选中所有语言；

// 当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；

// 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；

// 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。

// var
//     form = $('#test-form'),
//     langs = form.find('[name=lang]'),
//     selectAll = form.find('label.selectAll :checkbox'),
//     selectAllLabel = form.find('label.selectAll span.selectAll'),
//     deselectAllLabel = form.find('label.selectAll span.deselectAll'),
//     invertSelect = form.find('a.invertSelect');

// // 重置初始化状态:
// form.find('*').show().off();
// form.find(':checkbox').prop('checked', false).off();
// deselectAllLabel.hide();
// // 拦截form提交事件:
// form.off().submit(function (e) {
//     e.preventDefault();
//     alert(form.serialize());
// });
// selectAll.click(function() {
//     if (selectAll.prop('checked')){
//         langs.prop('checked', true);
//         selectAllLabel.hide();
//         deselectAllLabel.show();
//     } else {
//         langs.prop('checked', false);
//         deselectAllLabel.hide();
//         selectAllLabel.show();
//     }
// });

// invertSelect.click(function() {
//     langs.each(function() {
//         if ($(this).prop('checked')) {
//             $(this).prop('checked', false);
//         } else {
//             $(this).prop('checked', true);
//         }
//     });
//     langs.change();
// });



// langs.change(function() {
//     let hasCheckedCount = form.find('[name="lang"]:checked').length;

//     if (hasCheckedCount === langs.length) {
//         selectAll.prop('checked', true);
//         selectAllLabel.hide();
//         deselectAllLabel.show();
//     } else {
//         selectAll.prop('checked', false);
//         deselectAllLabel.hide();
//         selectAllLabel.show();
//     }
// });

$(function () {
    var langall = $('input:checkbox[name="lang"]');//表单里所有的语言
    var selectcheckbox = $('.selectAll input:checkbox');//全选和全不选的对应的那一个checkbox
    var fanxuan_a = $('a.invertSelect');//反选的点击链接
    var all_select = false;//几种语言是否全被选中

    $('span.deselectAll').hide();//由于一上来对应着是没有被选中的状态，所以在全选那里对应着显示全选，隐藏不全选

    //实现判断是否每个语言都被选中...
    function isallselect() {
        langall.each(
            function () {
                if (this.checked == false) {
                    all_select = false;
                    return false;
                }
                all_select = true;
            })
    };

    //修改全选框和全不选框,实现3,4功能
    function changeselectcheckbox() {
        isallselect();//判断状态
        if (all_select == true) {
            $('span.selectAll').hide();//都全选了，需要隐藏起全选了
            $('span.deselectAll').show();//显示不全选
            $('.selectAll input:checkbox').prop('checked', true);//把全选框打勾
        }
        else {
            $('span.deselectAll').hide();//不是全选状态，需要隐藏起不全选
            $('span.selectAll').show();//显示全选
            $('.selectAll input:checkbox').prop('checked', false);//不打勾
        }
    };

    langall.change(changeselectcheckbox);//再每一次语言选择发生改变时修改

    function selectall() {
        if ($('.selectAll input:checkbox').prop('checked') == true) {
            langall.prop('checked', true);//勾上所有语言
            $('span.selectAll').hide();//隐藏全选
            $('span.deselectAll').show();//显示不全选
        }
        else {
            langall.prop('checked', false);
            $('span.deselectAll').hide();
            $('span.selectAll').show();
        }
    };
    selectcheckbox.change(changeselectcheckbox);//同理也是再selectchebox改变时候执行

    $('a.invertSelect').click(function () {
        for (var i = 0; i < langall.length; i++)//通过循环取反
            langall[i].checked = !langall[i].checked;
        changeselectcheckbox();//修改全选框状态
    })
});